<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index - My ASP.NET Application</title>
    <link href="Content/bootstrap.css" rel="stylesheet"/>
	<link href="Content/site.css" rel="stylesheet"/>

	<link href="Content/site.css" rel="stylesheet"/>
	<link href="Content/style.css" rel="stylesheet"/>

	<link href="Content/plugins/tooltips/tooltipster.css" rel="stylesheet"/>

    <script src="Scripts/modernizr-2.6.2.js"></script>

</head>
<body>
    <div class="container body-content">

		<div class="row">
		    <div id="left" class="col-md-7">

				<table id="table-results" class="table">
					<thead>
						<tr>
							<th>TEST</th>
							<th style="text-align: center">OBSERVATION</th>
							<th>DRUG LEVEL</th>
							<th>INTERPRETATION</th>
						</tr>
					</thead>
					<tbody>

						<tr class="tr-test" data-typeTest="AMP" class="tooltip" title="This is my image's tooltip message!" />
							<td>AMP</td>
							<td class="observation obs-test">Line</td>
							<td class="druglevel">Less than 1000 ng/ml</td>
							<td class="interpretation">Negative</td>
						</tr>

						<tr class="tr-test" data-typeTest="BAR">
							<td>BAR</td>
							<td class="observation obs-test">Line</td>
							<td class="druglevel">Less than 300 ng/ml</td>
							<td class="interpretation">Negative</td>
						</tr>

						<tr class="tr-test" data-typeTest="BZO">
							<td>BZO</td>
							<td class="observation obs-test">Line</td>
							<td class="druglevel">Less than 300 ng/ml</td>
							<td class="interpretation">Negative</td>
						</tr>

						<tr class="tr-test" data-typeTest="COC">
							<td>COC</td>
							<td class="observation obs-test">Line</td>
							<td class="druglevel">Less than 300 ng/ml</td>
							<td class="interpretation">Negative</td>
						</tr>

						<tr class="tr-test" data-typeTest="MDMA">
							<td>MDMA</td>
							<td class="observation obs-test">Line</td>
							<td class="druglevel">Less than 500 ng/ml</td>
							<td class="interpretation">Negative</td>
						</tr>

						<tr class="tr-test" data-typeTest="MET">
							<td>MET</td>
							<td class="observation obs-test">Line</td>
							<td class="druglevel">Less than 1000 ng/ml</td>
							<td class="interpretation">Negative</td>
						</tr>

						<tr class="tr-test" data-typeTest="MTD">
							<td>MTD</td>
							<td class="observation obs-test">Line</td>
							<td class="druglevel">Less than 300 ng/ml</td>
							<td class="interpretation">Negative</td>
						</tr>

						<tr class="tr-test" data-typeTest="OPI">
							<td>OPI</td>
							<td class="observation obs-test">Line</td>
							<td class="druglevel">Less than 2000 ng/ml</td>
							<td class="interpretation">Negative</td>
						</tr>

						<tr class="tr-test" data-typeTest="OXY">
							<td>OXY</td>
							<td class="observation obs-test">Line</td>
							<td class="druglevel">Less than 100 ng/ml</td>
							<td class="interpretation">Negative</td>
						</tr>

						<tr class="tr-test" data-typeTest="PCP">
							<td>PCP</td>
							<td class="observation obs-test">Line</td>
							<td class="druglevel">Less than 25 ng/ml</td>
							<td class="interpretation">Negative</td>
						</tr>

						<tr class="tr-test" data-typeTest="TCA">
							<td>TCA</td>
							<td class="observation obs-test">Line</td>
							<td class="druglevel">Less than 1000 ng/ml</td>
							<td class="interpretation">Negative</td>
						</tr>

						<tr>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>

						<tr>
							<td>Cr</td>							
							<td class="observation obs-test-common">Normal</td>
							<td>---------</td>
							<td>Normal</td>
						</tr>

						<tr>
							<td>Ni</td>
							<td class="observation obs-test-common">Normal</td>
							<td>---------</td>
							<td>Normal</td>
						</tr>

						<tr>
							<td>pH</td>
							<td class="observation obs-test-common">Normal</td>
							<td>---------</td>
							<td>Normal</td>
						</tr>

						<tr>
							<td>Bl</td>
							<td class="observation obs-test-common">Normal</td>
							<td>---------</td>
							<td>Normal</td>
						</tr>

						<tr>
							<td>S.G.</td>
							<td class="observation obs-test-common">Normal</td>
							<td>---------</td>
							<td>Normal</td>
						</tr>						


					</tbody>
				</table>

				<h5 style="font-weight: bold;">COMMENTS</h5>

				<p id="comments">
				</p>


		    </div>

		    <div class="col-md-4">
		    	<div id="patient-information">
			    	<h4>Patient Information</h4>
			    	<form id="form-patient" class="form-horizontal" role="form">
			    		<div class="form-group">
				    		<label class="col-sm-2 control-label" for="name">Name:</label>
				    		<div class="col-sm-10">
				    			<input class="form-control input-sm" id="name" name="name" type="text" />
				    		</div>
			    		</div>
			    		<div class="form-group">
				    		<label class="col-sm-2 control-label" for="ID">ID:</label>
				    		<div class="col-sm-10">
				    			<input class="form-control input-sm" id="ID" name="ID" type="text" />
				    		</div>		    		
			    		</div>		    		
			    	</form>
		    	</div>
		    </div>
		</div>


		<div class="col-md-1"></div>

        <img data-direction="1" id="btn-rotate" src="Images/horizontal/btn_rotate.PNG" />
        <img id="btn-print" src="Images/btn_print.PNG" />
        <img id="btn-export" src="Images/btn_export.PNG" />
        <img id="btn-cancel" src="Images/btn_cancel.PNG" />
        <!-- <button id="btn-print" class="btn btn-primary"><span style="font-weight: bold">PRINT</span></button> -->
    </div>

    <script src="Scripts/jquery-1.10.2.js"></script>

    <script src="Scripts/bootstrap.js"></script>
	<script src="Scripts/respond.js"></script>
	<script src="Scripts/plugins/tooltips/jquery.tooltipster.js"></script>

	<script type="text/javascript" src="Scripts/OOP/EObservation.js"></script>
	<script type="text/javascript" src="Scripts/OOP/ETest.js"></script>
	<script type="text/javascript" src="Scripts/OOP/Test.js"></script>
	<script type="text/javascript" src="Scripts/OOP/CommonTest.js"></script>
	<script type="text/javascript" src="Scripts/OOP/Display.js"></script>
	<script type="text/javascript" src="Scripts/OOP/HighLight.js"></script>
	<script type="text/javascript" src="Scripts/OOP/CommonHighLight.js"></script>
	<script type="text/javascript" src="Scripts/OOP/EObservationRules.js"></script>
	<script type="text/javascript" src="Scripts/OOP/TestClick.js"></script>
	<script type="text/javascript" src="Scripts/OOP/CommonTestClick.js"></script>

	<script type="text/javascript" src="Scripts/OOP/TranslationChart.js"></script>
	<script type="text/javascript" src="Scripts/OOP/ResultDrugLevel.js"></script>
	<script type="text/javascript" src="Scripts/OOP/ResultObservation.js"></script>
	<script type="text/javascript" src="Scripts/OOP/Comment.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#comments").html(GetTestComments());
		});
	</script>

	<script>
        $(document).ready(function() {
        	$(".tr-test").hover(
        		function(){

        			var comment = GetComment($(this).attr("data-typeTest"));

        			$(this).tooltipster({
                		content: comment
            		});
        		},
        		function(){});
        });
    </script>	
	
	<script type="text/javascript">
	$(document).ready(function(){
		$("#btn-rotate").click(function () {

			// alert("clicked");
			//1 - vertical
			//0 - horizontal

			if($(this).attr("data-direction") == 0)
			{
								
				$(this).attr("data-direction", 1);
				$(this).attr("src", "Images/horizontal/btn_rotate.PNG");

				$("#read-horizontal").hide();
				$("#read-vertical").show();
			}// end if
			else
			{
				
				$(this).attr("data-direction", 0);
				$(this).attr("src", "Images/vertical/btn_rotate.PNG");

				$("#read-vertical").hide();
				$("#read-horizontal").show();								
			}// end else
		});// end click
	});// end ready
	</script>


	</body>
</html>